<template>
  <el-dialog v-el-drag-dialog :title="treeForm.title" :close-on-click-modal="false" v-model="treeForm.open"
             width="600px" append-to-body>
    <div class="dialog-main-tree">
      <el-input suffix-icon="el-icon-search" placeholder="请输入" v-model="filterText" clearable show-word-limit/>
      <el-scrollbar style="height: 55vh;margin-top: 10px">
        <el-tree
          style="height: auto;width: 95%;margin-left: 2.5%"
          ref="eTree"
          :data="treeData"
          :default-checked-keys="checkedKeys"
          :check-strictly="true"
          :props="defaultProps"
          class="filter-tree"
          :node-key="`${defaultProps.id + defaultProps.type}`"
          highlight-current
          :lazy="treeForm.isLazy"
          :load="loadNode"
          :show-checkbox='treeForm.multiple'
          check-on-click-node
          @node-click="handleNodeClick"
          :default-expand-all="treeForm.defaultExpandAll">
          <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <span>
                    {{ node.data.showName || node.label }}
                  </span>
                </span>
          </template>
        </el-tree>
      </el-scrollbar>
    </div>
    <div slot="footer"
         class="dialog-footer">
      <dialog-footer slot="footer" @ok="save" @cancel="cancel"/>
    </div>
  </el-dialog>
</template>

<script>
import {postAction} from "@/platform/uni/api/uni/element/index.ts";

export default {
  name: "treeDialog",
  props: ['treeForm'],
  data() {
    return {
      filterText: '',
      defaultProps: {
        label: 'name',
        value: 'id',
        type: 'type',
        isLeaf: 'leaf'
      },
      treeData: [],
      checkedKeys: [],
      selected: {},
      chooseNode: {},//当前选中节点
      resolve: null,//保存load的resolve方法
    }
  },
  watch: {
    // 监听搜索事件
    async filterText(val) {
      let data = val ? {text: val} : null
      await this.getList(data);// 初次加载数据
    }
  },
  methods: {
    handleNodeClick(data) {
      this.selected = data;
    },
    loadNode(node, resolve) {
      if (node.data.id) {
        if (node.data.children && node.data.children.length > 0) {
          resolve(node.data.children)
        } else {
          let obj = {pid: node.data.id};
          if (node.data.params) {
            obj = {...obj, ...node.data.params};
            // obj['params'] = node.data.params;
          }
          postAction(this.treeForm.path, {...this.treeForm.extraForm, ...obj}).then(
            response => {
              if (response.data) {
                resolve(response.data)
              } else {
                resolve([])
              }
            }
          );
        }
      }
    },
    save() {
      let data = undefined;
      if (this.treeForm.multiple) {
        data = this.$refs.eTree.getCheckedNodes();
      } else {
        data = [this.selected];
      }
      this.$emit('selectedTreeRow', data);
      this.treeForm.open = false;

    },
    cancel() {
      this.treeForm.open = false;
    },
    // filterNode(value, data) {
    //   if (!value) return true
    //   return data.name.indexOf(value) !== -1
    // },
    getList(data = {}) {
      this.loading = true;
      postAction(this.treeForm.path, {...this.treeForm.extraForm, ...data}).then(
        response => {
          if (response.data) {
            if (data && Object.keys(data).length > 0) {
              response.data.map(e => {
                e.leaf = true;
                if (e.objectName && e.objectId) {
                  e.name = e.objectName;
                  e.id = e.objectId;
                  e.pid = e.parentObjectId;
                  e.type =e.objectType;
                  if (e.objectType == 'O') {
                    e.showName = `${e.objectName}(${e.objectId})`;
                  } else {
                    e.showName = `${e.objectName}(${e.username}/${e.phone}) ${e.parentName}`;
                  }
                } else {
                  e.showName = `${e.name}(${e.id})${e.categoryName ? ('/' + e.categoryName) : ''}`;
                }
              })
            }
            this.treeData = response.data;

          }
          this.loading = false;
        }
      );
    },
  }
}
</script>
<style scoped>

.dialog-main-tree {
  height: 60vh;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

}
</style>
